<template>
	<view>
		<view class="back">
			<image src="https://www.atuanjian.com/appletStatic/static/share.png" mode="aspectFill"></image>
			<view class="share">立即邀请好友</view>
		</view>
		
		<view class="header" :style="{top:statusHeight+'px',height:navHeight*2+'rpx'}">
			<view class="left_arrow"></view>
			<text>我的礼券</text>
		</view>
	</view>
</template>

<script>
	import { statusHeight, navHeight} from '@/utils/common.js'
	export default {
		data() {
			return {
				statusHeight:0,
				navHeight:0
			}
		},
		methods: {
			
		},
		onLoad() {
			this.statusHeight=statusHeight
			this.navHeight=navHeight
		}
	}
</script>

<style lang="scss">
	.back{
		width: 750rpx; 
		height: 1624rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			display: block;
		}
		.share{
			width: 670rpx;
			height: 92rpx;
			background: rgb(243, 82, 74);
			box-shadow: 0px 6rpx 20rpx rgba(243, 94, 84, 0.59); 
			border-radius: 46rpx;
			position: absolute;
			bottom: 168rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 100;
			text-align: center;
			line-height: 92rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400; 
			color: #FFFFFF;
		}
	}
	.header{
		width: 750rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		z-index: 10;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 32rpx;
		.left_arrow{
			width: 16rpx;
			height: 16rpx;
			border-top: 4rpx solid #FFFFFF;
			border-left: 4rpx solid #FFFFFF;
			transform: rotate(-45deg);
			margin-right: 22rpx;
		}
		text{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold; 
			color: #FFFFFF;
		}
	}
</style>
